<template>
  <view>
    <view class="top">
      <view class="topContent">
        <view class="topContentLeft">
          <view class="topContentLeftOne">天使合伙人</view>
          <view class="topContentLeftTwo">2025.08.16到期</view>
          <view class="topContentLeftThree">下级用户平台买/卖交易额的百分之2</view>
        </view>
        <view class="topContentRight">
          <image src="@/static/img/2zz.png"
            style="width: 168rpx;height: 100%;"></image>
        </view>
      </view>
    </view>
    <view class="bottom">
      <view class="bottomTop">
        <view class="bottomTopOne">
          <view :class="{ 'isPartner': selected === '1', 'partner': selected !== '1' }"
            @click="select('1')">
            初级合伙人
          </view>
          <view :class="{ 'isPartner': selected === '2', 'partner': selected !== '2' }"
            @click="select('2')">
            天使合伙人
          </view>
          <view :class="{ 'isPartner': selected === '3', 'partner': selected !== '3' }"
            @click="select('3')">
            至尊合伙人
          </view>

        </view>
        <view class="bottomTopTwo">
          <view v-for="(item, index) in list"
            :key="index"
            class="list-item">
            <view class="oneImg">
              <image :src="item.image1"
                style="width:56rpx;height:56rpx;"></image>
            </view>

            <view class="twoText">{{ item.text }}</view>
            <image :src="item.image2"
              class="threeImg"></image>
          </view>
          <!-- <view class="bottomTopTextOne">开通一年会员</view>
          <view class="bottomTopTextTwo">
            <span class="bottomTopTextTwoOne">¥</span>
            <span class="bottomTopTextTwoTwo">2998</span>
            <span class="bottomTopTextTwoThree">.00</span>
          </view>
          <view class="bottomTopTextThree">会员特权：</view>
          <view class="bottomTopTextFour">下级用户在平台买/卖交易额的百分之5</view> -->
        </view>
      </view>
      <view class="bottomBottom">
        <view class="bottomBottomRadio">
          <image src="@/static/img/yuan.png"
            style="width: 32rpx;height: 32rpx;margin-right: 12rpx;"></image>
          <span>点击立即购买表明您已阅读并同意《会员服务协议》</span>
          <!-- <label class="radio">
            <radio value="r1"
              :checked="radio" />点击立即购买表明您已阅读并同意《会员服务协议》
          </label> -->
        </view>
        <view class="bottomBottomButtom">立即购买</view>

      </view>
    </view>
  </view>

</template>

<script setup
  lang="ts">
  import { ref } from 'vue'
  const radio = ref(false)

  // 定义一个响应式变量来存储当前选中的合伙人类型
  const selected = ref<string>('2');

  // 定义一个方法来处理点击事件并更新选中的合伙人类型
  const select = (partnerType : string) => {
    selected.value = partnerType;
    if (selected.value == '1') {
      uni.navigateTo({
        url: '/pages/my/primary'
      })
    }
   /* else if (selected.value == '2') {
      uni.navigateTo({
        url: '/pages/my/angel'
      })
    } */ else if (selected.value == '3') {
      uni.navigateTo({
        url: '/pages/my/noble'
      })
    }
  };

  const list = ref([
    {
      image1: "../../static/img/zjlb1.png",
      text: '1.可获取团队交易额0.5％的交易流水提成，默认终身有效',
      image2: '../../static/img/zhengque.png',
    },
    {
      image1: '../../static/img/zjlb2.png',
      text: '2.团队成员升级奖励，终身有效',
      image2: '../../static/img/zhengque.png',

    },
    {
      image1: "../../static/img/zjlb3.png",
      text: '3.总部提供免费培训',
      image2: '../../static/img/zhengque.png',
    },
    {
      image1: '../../static/img/zjlb4.png',
      text: '4.提供专属客服',
      image2: '../../static/img/zhengque.png',

    },
    {
      image1: "../../static/img/zjlb5.png",
      text: '5.平台每月大量专属补贴，不限于流量，优惠券，推广物料等等',
      image2: '../../static/img/zhengque.png',
    },
    {
      image1: '../../static/img/zjlb6.png',
      text: '6.可参与公司组织的旅行',
      image2: '../../static/img/cuowu.png',

    },
    {
      image1: '../../static/img/zjlb7.png',
      text: '7.可参与领取更多公司内部福利，年终奖，优秀团队奖等等',
      image2: '../../static/img/cuowu.png',

    },
    {
      image1: "../../static/img/zjlb8.png",
      text: '8.至尊合伙人公司奖励年终分红',
      image2: '../../static/img/cuowu.png',
    },
    {
      image1: "../../static/img/zjlb9.png",
      text: '9.更多专属福利敬请期待',
      image2: '../../static/img/cuowu.png',
    },
  ]);
</script>

<style lang="scss">
  .top {
    height: 360rpx;
    background: linear-gradient(to bottom, #6F583F 0%, #725D40 100%);
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    padding-top: 70rpx;

    .topContent {
      width: 680rpx;
      height: 280rpx;
      background-image: url("@/static/img/tianshibj.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      margin: 0 auto;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .topContentLeft {
        width: 402rpx;
        height: 158rpx;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
      }

      .topContentLeftOne {
        width: 402rpx;
        height: 54rpx;
        font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
        font-weight: 700;
        font-size: 36rpx;
        color: #987A3D;
        line-height: 54rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }

      .topContentLeftTwo {
        width: 402rpx;
        height: 36rpx;
        font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
        font-weight: normal;
        font-size: 24rpx;
        color: #987A3D;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }

      .topContentLeftThree {
        margin-top: 32rpx;
        width: 402rpx;
        height: 36rpx;
        font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
        font-weight: normal;
        font-size: 24rpx;
        color: #B0945E;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }

      .topContentRight {
        width: 192rpx;
        height: 216.01rpx;
      }
    }

  }

  .bottom {
    width: 750rpx;
    height: 100vh;
    background: linear-gradient(180deg, #0F0F0F 0%, #2B2219 100%), #0F0F0F;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    overflow: hidden;

    .bottomTop {
      margin: 0 24rpx 80rpx 24rpx;
      width: 702rpx;
      height: 1050rpx;
      /* background-image: url("@/static/img/tianshihezuobj.png");
      background-repeat: no-repeat;
      background-size: 100% 100%; */
      padding-top: 40rpx;

      .bottomTopOne {
        margin: 0 65rpx 48rpx 65rpx;
        width: 620rpx;
        height: 80rpx;
        background: #2B3549;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
        padding: 8rpx;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .isPartner {
          width: 260rpx;
          height: 64rpx;
          background: #FFFFFF;
          padding: 8rpx 18rpx;
          border-radius: 16rpx 16rpx 16rpx 16rpx;
          font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
          font-weight: 700;
          font-size: 32rpx;
          color: #262626;
          line-height: 48rpx;
          text-align: center;
          font-style: normal;
          text-transform: none;
        }

        .partner {
          width: 260rpx;
          height: 64rpx;
          padding: 8rpx 18rpx;
          border-radius: 16rpx 16rpx 16rpx 16rpx;
          font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
          font-weight: 700;
          font-size: 32rpx;
          color: #FFFFFF;
          line-height: 48rpx;
          text-align: center;
          font-style: normal;
          text-transform: none;
        }
      }

      .bottomTopTwo {
        width: 702rpx;
        height: 858rpx;
        background: linear-gradient(180deg, rgba(33, 35, 51, 0) 0%, #332B21 100%);
        border-radius: 24rpx 24rpx 24rpx 24rpx;

        .list-item {
          display: flex;
          align-items: center;
          justify-content: space-around;
          width: 702rpx;
          height: 88rpx;
          border-radius: 0rpx 0rpx 0rpx 0rpx;
          border: 2rpx solid rgba(196, 232, 242, 0.1);
          opacity: 0.8;
        }

        .oneImg {
          width: 56rpx;
          height: 56rpx;
          margin: 20rpx 24rpx 20rpx 24rpx;
        }

        .twoText {
          width: 502rpx;
          height: 76rpx;
          font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
          font-weight: normal;
          font-size: 26rpx;
          color: #FFFFFF;
          display: flex;
          align-items: center;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }

        .threeImg {
          width: 48rpx;
          height: 48rpx;
          border-radius: 0rpx 0rpx 0rpx 0rpx;
          margin-top: 20rpx;
          margin-right: 24rpx;
        }
      }
    }

    .bottomBottom {
      margin-top: 10rpx;
      // padding-bottom: 108rpx;

      .bottomBottomRadio {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 25rpx 24rpx 25rpx;
        width: 700rpx;
        height: 36rpx;
        font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
        font-weight: normal;
        font-size: 24rpx;
        color: #8C8C8C;
        line-height: 36rpx;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }

      .bottomBottomButtom {
        margin: 0 auto;
        width: 638rpx;
        height: 92rpx;
        background: linear-gradient(147deg, #FDFBF4 0%, #FBEBC9 29%, #F3CEA0 100%), #C6EAFA;
        box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(118, 104, 94, 0.3);
        border-radius: 46rpx 46rpx 46rpx 46rpx;
        padding: 22rpx 0;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 32rpx;
        color: #3D6B98;
        line-height: 48rpx;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
    }
  }
</style>